<template>
  <!-- Swipe to close demo sheet -->
  <f7-sheet
    class="demo-sheet backgroundSubColor"
    style="height:auto; --f7-sheet-bg-color: #fff;"
    swipe-to-close
    backdrop
    :opened="moreSheetOpened"
    @sheet:closed="handleClose()"
  >
    <f7-page-content>
      <f7-list inset>
        <f7-list-button title="添加到播放列表" sheet-close @click.stop="handleSelect(1)"></f7-list-button>
        <f7-list-button
          title="添加到歌单"
          sheet-close
          @click.stop="handleSelect(2)"
        ></f7-list-button>
        <f7-list-button
          v-if ="from === 'songCard'"
          title="从歌单中删除"
          sheet-close
          @click.stop="handleSelect(3)"
        ></f7-list-button>
        <f7-list-button
          v-if ="from === 'whole' && getManageState"
          title="从曲库中删除"
          sheet-close
          @click.stop="handleSelect(4)"
        ></f7-list-button>
       
      </f7-list>
    </f7-page-content>
  </f7-sheet>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import {debounce} from '@/utils/index.js'
export default {
  computed: {
    ...mapGetters({
      getManageState:'getManageState',
    })
  },
  props:{
    from:{
      type:String,
      default:'whole',
    },
    moreSheetOpened:{
      type:Boolean,
      default:false,
    }
  },
  data(){
    return{
      operateOption:0,//1表示列表第一项
    }
  },
  methods: {
    handleClose(){
      this.$emit('getSheetOption',this.operateOption);
    },
    //n=1表示选择了按钮1
    handleSelect(n){
      this.operateOption = n;
    },
  },
  updated(){
    this.operateOption = 0;
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .sheet-modal {
  $backgroundSubColor: #d4c3c3;
  $spanColor: #212121;
  /deep/ ul {
    background-color: $backgroundSubColor;
    .list-button{
      color: $spanColor;
    }
    
    
  }
}
.dark .sheet-modal {
  $backgroundSubColor: #592e2e;

  $spanColor: #ffffff;
  /deep/ ul {
    background-color: $backgroundSubColor;
    .list-button{
      color: $spanColor;
    }
   
  }
}
</style>